<template>
  <div>
    <el-card shadow="hover">
      <div slot="header" class="clearfix">
        <!-- 新建 -->
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="addEdit('add')"
          v-permission="['department@save']"
          >{{ $t("common.common18") }}</el-button
        >
      </div>
      <el-table
        v-permission="['department@index']"
        :data="tableData"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
        highlight-current-row
        default-expand-all
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        :max-height="$store.state.app.tableHeight"
      >
        <el-table-column prop="id" label="id" min-width="80" />
        <!-- 部门名称 -->
        <el-table-column
          prop="department_name"
          :label="$t('dept.dept1')"
          min-width="180"
        />
        <!-- 描述 -->
        <el-table-column
          :label="$t('dept.dept2')"
          min-width="180"
          prop="description"
        />
        <!-- 操作 -->
        <el-table-column
          :label="$t('common.common15')"
          min-width="160px"
          fixed="right"
          class-name="iconBtn"
          v-if="
            checkPermission([
              'department@save',
              'department@read',
              'department@delete',
            ])
          "
        >
          <template slot-scope="scope">
            <div>
              <span
                @click="
                  addEdit(
                    'add',
                    JSON.parse(scope.row.parent_id_list),
                    scope.row.id
                  )
                "
                v-permission="['department@save']"
              >
                <!-- 添加下级 -->
                <btn-tip
                  :content="$t('common.common37')"
                  type="primary"
                  icon="el-icon-circle-plus-outline"
                ></btn-tip>
              </span>
              <span
                @click="edit(scope.row.id)"
                v-show="scope.row.id == 1 ? false : true"
                v-permission="['department@read']"
              >
                <!-- 编辑 -->
                <btn-tip
                  :content="$t('common.common20')"
                  type="success"
                  icon="el-icon-edit"
                ></btn-tip>
              </span>
              <span
                @click="delList(scope.row.id)"
                v-show="scope.row.id == 1 ? false : true"
                v-permission="['department@delete']"
              >
                <!-- 删除 -->
                <btn-tip
                  :content="$t('common.common9')"
                  type="danger"
                  icon="el-icon-delete"
                ></btn-tip>
              </span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <deptAddEdit ref="addEdit" />
  </div>
</template>
<script>
import deptAddEdit from "@/components/system/deptAddEdit";
import { getList, delList } from "@/api/system/dept";
export default {
  components: {
    deptAddEdit,
  },
  data() {
    return {
      tableData: [],
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    onSubmit() {},
    edit(id) {
      this.$refs.addEdit.EditInit(id);
    },
    addEdit(type, id, childrenId) {
      this.$refs.addEdit.init(type, id, childrenId);
    },
    getList() {
      getList().then((res) => {
        this.tableData = res.data;
      });
    },
    delList(id) {
      // "此操作将删除该组织, 是否继续?", "确定删除？"
      this.$confirm(this.$t("dept.dept3"), this.$t("common.common10"), {
        confirmButtonText: this.$t("common.common2"),
        cancelButtonText: this.$t("common.common1"),
        type: "warning",
      })
        .then(() => {
          delList(id).then((res) => {
            if (res.code == 10000) {
              this.getList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            // 已取消删除
            message: this.$t("common.common11"),
          });
        });
    },
  },
};
</script>
